<template>
  <!-- 日期时间选择器 -->
  <div class="pho-form-item" :style="newStyle">
    <van-field
      class="form-input-hidden"
      v-bind="$attrs"
      :value="formValue.join('')"
      :label="showLabel ? $attrs.label : ''"
      :name="$attrs.__vModel__"
      readonly
      input-align="right"
      label-align="left"
    >
    <template #label>
      <span v-if="showLabel" slot="label" :style="newStyle.font">{{$attrs.label}}</span>
    </template>
      <template #right-icon v-if="clearable">
        <div @click.stop="handleClear">
          <van-icon name="clear" />
        </div>
      </template>
    </van-field>
    <TextShow v-if="$attrs.onlyShow" :value="$utils.getDateText($attrs)" />
    <template v-else>
      <div class="right-box form-range-picker" v-if="!isTop">
        <div @click="handleClick(0)" class="startPlaceholder">
          <span v-if="formValue[0]">{{ formValue[0] }}</span>
          <span v-else class="van-gray5">{{ $attrs.startPlaceholder }}</span>
        </div>
        <div class="rangeSeparator">{{ $attrs.rangeSeparator }}</div>
        <div @click="handleClick(1)" class="endPlaceholder">
          <span v-if="formValue[1]">{{ formValue[1] }}</span>
          <span v-else class="van-gray5">{{ $attrs.endPlaceholder }}</span>
        </div>
      </div>
      <template v-else>
        <van-cell
          class="date-range-cell"
          :class="{ 'form-cell--disabled': $attrs.disabled }"
          :title="$attrs.startPlaceholder"
          :value="formValue[0]"
          is-link
          center
          @click="handleClick(0)"
        />
        <van-cell
          class="date-range-cell"
          :class="{ 'form-cell--disabled': $attrs.disabled }"
          :title="$attrs.endPlaceholder"
          :value="formValue[1]"
          is-link
          center
          @click="handleClick(1)"
        />
      </template>
      <DatePicker
        ref="DatePicker"
        :type="$attrs.type"
        :format="$attrs.format"
        @callBack="handleConfirm"
      />
    </template>
  </div>
</template>

<script>
import DatePicker from "../components/datePicker.vue";
import { comMixin } from "../../../utils/comMixins";
export default {
  mixins: [comMixin],
  name: "phone-form-daterange-picker",
  components: {
    DatePicker,
  },
  model: {
    prop: "value", // 绑定的值，通过父组件传递
    event: "update",
  },
  props: {
    value: {
      type: [String, Array],
      default: "",
    },
    // 是否展示标题
    showLabel: {
      type: Boolean,
      default: true,
    },
    // 是否为上下布局
    isTop: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      startDate: "", // 开始时间
      endDate: "", // 结束时间
      formValue: ["", ""], // 时间范围
      type: 0, // 0-开始时间 1-结束时间
    };
  },
  watch: {
    value: {
      immediate: true,
      deep: true,
      handler(newValue) {
        this.formValue = newValue || ["", ""];
      },
    },
  },

  methods: {
    // type 0-开始时间 1-结束时间
    handleClick(type) {
      this.type = type;
      if (this.$attrs.disabled || this.$attrs.readonly) return;
      this.$refs.DatePicker.open(this.formValue[type]);
    },
    handleConfirm(val) {
      this.$set(this.formValue, this.type, val);
      this.$emit("update", this.formValue);
      this.$emit("change", this.formValue);
      this.onChange(this.formValue);
      this.$emit("confirm", this.formValue);
    },
    handleClear() {
      this.$emit("update", "");
      this.$emit("clear");
      this.onClear();
    },
  },
};
</script>

<style lang="scss" scoped></style>
